// 导入组件

import Header from '../../components/Header/Header'; // 导入Header组件
import { useState } from 'react';
import LoginPopup from '../../components/LoginPopup/LoginPopup'; // 导入登录弹窗组件
import { Modal } from 'antd'; // 导入antd的Modal组件
import LoginOut from '../../components/LoginOut/LoginOut'; // 导入退出登录组件
import Authoring from '../../components/Authoring_tool/Authoring_tool' // 导入作者工具组件
import Tab_switching from '../../components/Tab_switching/Tab_switching' // 导入标签切换组件
import Recently_opened from '../../components/Recently_opened/Recently_opened'
import Footer from '../../components/Footer/Footer'; // 导入Footer组件
import {CountDown, NewArrivals} from '../../components/NewArrivals/NewArrivals'
import {ProductDisplay} from '../../components/NewArrivals/NewArrivals'
import {DragonBoatFestival} from '../../components/NewArrivals/NewArrivals'
import GamePlay from '../../components/GamePlay/GamePlay';
import HotCalendar from '../../com/HotCalendar/HotCalendar'
import { useOutletContext } from 'react-router-dom';
type OutletContext = {
  openDesignModal: () => void;
};
function Home() {
    const { openDesignModal } = useOutletContext<OutletContext>();
  // 使用useState钩子，初始化userInfo状态，从localStorage中读取用户信息
  const [userInfo, setUserInfo] = useState(() => {
    const saved = localStorage.getItem('userInfo');
    return saved ? JSON.parse(saved) : null;
  });

  // 定义isLogoutVisible和isLoginVisible状态，用于控制退出登录和登录弹窗的显示
  const [isLogoutVisible, setIsLogoutVisible] = useState(false);
  const [isLoginVisible, setIsLoginVisible] = useState(false);

 

  // 定义handleLogout函数，用于退出登录
  const handleLogout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('userInfo');
    setUserInfo(null);
    setIsLogoutVisible(false);
  };

  // 定义handleLoginSuccess函数，用于登录成功后更新用户信息
  const handleLoginSuccess = () => {
    setIsLoginVisible(false);
    // 强制从localStorage读取最新用户信息
    const saved = localStorage.getItem('userInfo');
    setUserInfo(saved ? JSON.parse(saved) : null); // 需要确保这里能触发更新
  };

  // 返回组件结构
  return (
    <div>

      {/* 头部组件 */}
      <Header
        onLoginClick={() => setIsLoginVisible(true)}
        userInfo={userInfo}
        onLogout={() => setIsLogoutVisible(true)}
      />

      <Modal
        open={isLoginVisible}
        onCancel={() => setIsLoginVisible(false)}
        footer={null}
        centered
        width={800}
      >
        {/* 登录弹窗组件 */}
        <LoginPopup onLoginSuccess={handleLoginSuccess} />
      </Modal>
      {/* 退出登录组件 */}
      <LoginOut
        visible={isLogoutVisible}
        onConfirm={handleLogout}
        onCancel={() => setIsLogoutVisible(false)}
      />


      {/* 作者工具组件 */}
      <Authoring  onCreateDesignClick={openDesignModal}/>
      {/* 标签切换组件 */}
      <Tab_switching />
      {/* 最近打开 */}
      <Recently_opened />

      {/* 新品推荐 */}
      <NewArrivals />
       {/* 玩法新探 */}
      <GamePlay />
      {/* 热点日历 */}
      <HotCalendar />
      {/* 产品展示 */}
      <ProductDisplay/>
      {/* 端午节 */}
      <DragonBoatFestival/>
      {/* 倒计时 */}
      <CountDown/>
       {/* 底部组件 */}
      <Footer />


   
    </div>
  );
}

export default Home;